<template>
	<template v-if="flag">
		<div class="kongjian" @click="checkFlag" :style="'background-image:url('+props.iconUrl+');background-size: contain;'"></div>
	</template>
	<template v-else>
		<div class="kongjian" @click="checkFlag" :style="'background-image:url('+props.iconCheckUrl+');background-size: contain;'"></div>
	</template>
</template>

<script setup>
	import {ref,defineProps,defineEmits,onMounted,onBeforeMount,onBeforeUpdate,onUpdated} from "vue"
	let props = defineProps({
		iconUrl:{
			type:String
		},
		iconCheckUrl:{
			type:String
		},
		flag:{
			type:Boolean,
			default:false
		}
	})
	let flag = ref(false)
	onMounted(()=>{
		flag.value = props.flag
		// console.log(flag.value,27)
	})
	// console.log("组件的 setup这是z-kongjian的 ")
	onMounted(() => {
		// console.log("子组件的 onMounted这是z-kongjian的 ")
		// kjLxFlag.value = store.state.tiandituConfig.lxFlag
		
	})
	onBeforeMount(()=>{
		// console.log("子组件的 onBeforeMount这是z-kongjian的 ")
	})
	const emit = defineEmits(['checkFlag'])
	const checkFlag=()=>{
		flag.value=!flag.value
		emit("checkFlag",flag.value)
	}
	
	onBeforeUpdate(()=>{
		// console.log("子组件的 onBeforeUpdate这是z-kongjian的 ")
	})
	
	onUpdated(()=>{
		// console.log("子组件的 onUpdated这是z-kongjian的 ")
	})
</script>

<style scoped>
	.kongjian{
		width: 30px;
		height: 30px;
	}
</style>